<template>
	<view class="page">
    <view class="page-navbar" :style="'background-image: url('+indexBg+');'">
      <u-navbar :fixed="false" title="明细" placeholder bgColor="transparent"></u-navbar>
    </view>
    <view class="tabs-box">
      <view class="tabs-item" :class="{active: statusName == '1'}" @click="statusName='1'">已读</view>
      <view class="tabs-item" :class="{active: statusName == '0'}" @click="statusName='0'">未读</view>
    </view>
    <view class="list">
      <view class="list-item" v-for="item in readList" :key="item.id">
        {{ item.staffName }} {{ item.phone }}
      </view>
    </view>
    <view v-if="readList.length == 0" class="a-empty"><a-empty></a-empty></view>
    <view class="footer-primary-btn" @click="jumpTo('/other/staff/staffSelect', {type: '2', id: id})">添加发送对象</view>
	</view>
</template>

<script>
import { getStaffReadList } from '@/api/index'

export default {
  data() {
    return {
      indexBg: 'https://gowork365.com/prod-api/profile/mini/index/indexBg1.png',
      id: '',
      statusName: '1',
      readList: [],
    }
  },
  watch: {
    statusName() {
      this.search()
    },
  },
  onLoad(options) {
    this.id = options.id
  },
  onShow() {
    this.search()
  },
  methods: {
    getList() {
      uni.showLoading({ mask: true })
      getStaffReadList({id: this.id, status: this.statusName}).then(response => {
        uni.hideLoading()
        this.readList = res.data;
      });
    },
    search() {
      this.readList = []
      this.getList()
    },
  },
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  background-repeat: no-repeat;
  background-size: 750rpx 348rpx;
  padding-bottom: 180rpx;
  .page-navbar {
    background-repeat: no-repeat;
    background-size: 750rpx 690rpx;
    margin-bottom: 32rpx;
  }
  .tabs-box {
    width: 686rpx;
    display: flex;
    gap: 14rpx;
    margin: 0 auto 38rpx;
    .tabs-item {
      width: 196rpx;
      height: 76rpx;
      line-height: 76rpx;
      border-radius: 38rpx;
      text-align: center;
      font-family: PingFang-SC, PingFang-SC;
      font-size: 24rpx;
      color: #FFFFFF;
    }
    .active {
      background: #FFFFFF;
      color: #138E88;
    }
  }
  .list {
    width: 686rpx;
    margin: 48rpx auto;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
    border-radius: 16rpx;
    padding: 0 32rpx;
    .list-item {
      padding: 32rpx 0;
      font-family: PingFangSC, PingFang SC;
      font-size: 28rpx;
      color: rgba(0,0,0,0.85);
    }
  }
}
</style>
